<!--
收藏
 -->
<template>
  <div>
    <div class="listBox">
      <noMore v-if="listData.length == 0"></noMore>
      <div class="invitationBox" v-for="(item, index) in listData" :key="index">
        <!-- //有图 -->
        <div
          v-if="
            item.articleid &&
              (item.artictype == '珠海港圈' || item.artictype == '创新建议')
          "
        >
          <div class="flexBox">
            <div class="leftImg">
              <el-image
                style="width: 123px; height: 123px"
                :src="item.articleid.articleimg"
                fit="cover"
              ></el-image>
            </div>
            <div style="flex-grow: 2;">
              <div
                class="invitationBoxTitle"
                @click="toZhuHaiDetails(item.articleid)"
              >
                {{ item.articleid.articlename }}
              </div>
              <div class="invitationBoxSubTitle">
                {{ item.articleid.textReplace }}
              </div>
              <div class="invitationBoxBottom">
                <div class="invitationBoxBottomItem">
                  {{ item.articleid.reading }} 次阅读
                </div>
                <div class="invitationBoxBottomItem">
                  {{ item.articleid.reply }} 回复
                </div>
                <div class="invitationBoxBottomItem">
                  {{ item.articleid.praiseSize }} 赞
                </div>
                <div class="invitationBoxBottomItem">
                  {{ item.artictype }}
                </div>
                <div
                  class="invitationBoxBottomItem2"
                  @click="deletLike(item._id, index)"
                >
                  取消收藏
                </div>
              </div>
            </div>
          </div>
          <el-divider></el-divider>
        </div>

        <!-- //无图 -->
        <div v-if="item.resource_id && item.artictype == '资源共享'">
          <div class="flexBox2">
            <div>
              <div
                class="invitationBoxTitle"
                @click="toResourceDetails(item.resource_id)"
              >
                {{ item.resource_id.resourcename }}
              </div>
              <div class="invitationBoxSubTitle">
                {{ item.resource_id.textReplace }}
              </div>
              <div class="invitationBoxBottom">
                <div class="invitationBoxBottomItem">
                  {{ item.resource_id.reading }} 次阅读
                </div>
                <div class="invitationBoxBottomItem">
                  {{ item.resource_id.reply }} 回复
                </div>
                <div class="invitationBoxBottomItem">
                  {{ item.resource_id.praiseSize }} 赞
                </div>
                <div class="invitationBoxBottomItem">
                  {{ item.artictype }}
                </div>
                <div
                  class="invitationBoxBottomItem2"
                  @click="deletLike(item._id, index)"
                >
                  取消收藏
                </div>
              </div>
            </div>
          </div>
          <el-divider></el-divider>
        </div>

        <!-- //问题 -->
        <div v-if="item.problem_id">
          <div class="flexBox2">
            <div>
              <div
                class="invitationBoxTitle"
                @click="toHelpDetails(item.problem_id)"
              >
                {{ item.problem_id.problemname }}
              </div>
              <div class="invitationBoxSubTitle">
                {{ item.problem_id.textReplace }}
              </div>
              <div class="invitationBoxBottom">
                <div class="invitationBoxBottomItem">
                  {{ item.problem_id.reading }} 次阅读
                </div>
                <div class="invitationBoxBottomItem">
                  {{ item.problem_id.reply }} 回答
                </div>
                <div class="invitationBoxBottomItem">互帮互助</div>
                <div
                  class="invitationBoxBottomItem2"
                  @click="deletLike(item._id, index)"
                >
                  取消收藏
                </div>
              </div>
            </div>
          </div>
          <el-divider></el-divider>
        </div>

        <!-- //问题 回答-->
        <div v-if="item.answer_id">
          <div class="flexBox2">
            <div>
              <div
                class="invitationBoxTitle"
                @click="toHelpDetailsId(item.answer_id)"
              >
                {{ item.answer_id.problem_id.problemname }}
              </div>
              <div class="invitationBoxSubTitle">
                {{ item.answer_id.textReplace }}
              </div>
              <div class="invitationBoxBottom">
                <div class="invitationBoxBottomItem">
                  {{ item.answer_id.reply }} 回复
                </div>
                <div class="invitationBoxBottomItem">
                  {{ item.answer_id.praiseSize }} 赞
                </div>
                <div class="invitationBoxBottomItem">互帮互助</div>
                <div
                  class="invitationBoxBottomItem2"
                  @click="deletLike(item._id, index)"
                >
                  取消收藏
                </div>
              </div>
            </div>
          </div>
          <el-divider></el-divider>
        </div>
        <!-- //删除-->
        <div
          v-if="
            !item.problem_id &&
              !item.answer_id &&
              !item.resource_id &&
              !item.articleid
          "
        >
          <div class="flexBox2">
            <div>
              <div class="invitationBoxTitle" style="color:#c0392b">
                该文章已被删除
              </div>
              <div class="invitationBoxSubTitle"></div>
              <div class="invitationBoxBottom">
                <div class="invitationBoxBottomItem">
                  {{ item.artictype }}
                </div>
                <div
                  class="invitationBoxBottomItem2"
                  @click="deletLike(item._id, index)"
                >
                  取消收藏
                </div>
              </div>
            </div>
          </div>
          <el-divider></el-divider>
        </div>
      </div>
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="limitSize"
        layout="prev, pager, next, jumper"
        :total="articleSize"
        :current-page.sync="currentPage"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { get_like } from "../../../api/like";
import { delete_like } from "@/api/like";
import noMore from "@/components/noMore";
export default {
  name: "myCollection",
  data() {
    return {
      skipSize: 0, //开始位置
      endSize: 10, //末尾位置
      articleSize: 0, //总文章
      limitSize: 10,
      currentPage: 1,
      listData: [],
    };
  },
  created() {
    this.getLike();
  },
  components: {
    noMore,
  },
  methods: {
    async getLike() {
      let likeData = await get_like({
        query: {
          userid: this.$store.getters.userInfo,
        },
        populate: JSON.stringify([
          {
            path: "articleid",
          },
          {
            path: "problem_id",
          },
          {
            path: "answer_id",
            populate: [
              {
                path: "problem_id",
              },
            ],
          },
          {
            path: "resource_id",
          },
        ]),
        count: true,
        skip: this.skipSize,
        limit: this.limitSize,
      });
      console.log("收藏Data:", likeData);
      this.listData = likeData.data;
      this.articleSize = likeData.countnum;
    },
    handleCurrentChange(val) {
      this.skipSize = (val - 1) * this.limitSize;
      console.log(`当前页: ${val}`);
      this.getLike();
    },
    async deletLike(id, index) {
      this.$confirm("此操作将取消收藏, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await delete_like({
            query: {
              _id: id,
            },
          });
          this.listData.splice(index, 1);
          this.$message({
            type: "success",
            message: "取消成功!",
          });
        })
        .catch(() => {});
    },
    toHelpDetailsId(item) {
      this.$router.push({
        path: "/helpDetails",
        query: {
          problem_id: item.problem_id._id,
          answer_id: item._id,
        },
      });
    },
    toZhuHaiDetails(item) {
      if (item.aeticletype == "珠海港圈") {
        this.$router.push({
          path: "/zhuhaiPortCircleDetails",
          query: {
            article_id: item._id,
          },
        });
      } else {
        this.$router.push({
          path: "/proposalDetails",
          query: {
            article_id: item._id,
          },
        });
      }
    },
    toHelpDetails(item) {
      this.$router.push({
        path: "/helpDetails",
        query: {
          problem_id: item._id,
        },
      });
    },
    toResourceDetails(item) {
      this.$router.push({
        path: "/resourceSharingDetails",
        query: {
          article_id: item._id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.listBox {
  padding-bottom: 20px;
  .invitationBox {
    .flexBox {
      display: flex;
      .leftImg {
        margin-right: 20px;
      }
      .invitationBoxTitle {
        font-size: 23px;
        font-weight: 600;
        color: #333;
        margin-bottom: 15px;
        // width: 727px;
        overflow: hidden;
        text-overflow: ellipsis; //超出部分以省略号显示
        // white-space: nowrap;
        display: -webkit-box;
        -webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
        -webkit-box-orient: vertical;
        cursor: pointer;
        &:hover {
          color: #1d2f70;
          text-decoration: underline;
        }
      }
      .invitationBoxSubTitle {
        min-height: 40px;
        color: #6c6c6c;
        font-size: 17px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 可以显示的行数，超出部分用...表示*/
        -webkit-box-orient: vertical;
      }
      .invitationBoxBottom {
        display: flex;
        margin-top: 14px;
        color: #b3b2b2;
        position: relative;
        .invitationBoxBottomItem {
          margin-right: 18px;
          font-size: 14px;
        }
        .invitationBoxBottomItem2 {
          position: absolute;
          right: 0;
          margin-right: 18px;
          font-size: 14px;
          color: dodgerblue;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
    .flexBox2 {
      .invitationBoxTitle {
        font-size: 23px;
        font-weight: 600;
        color: #333;
        margin-bottom: 15px;
        // width: 727px;
        overflow: hidden;
        text-overflow: ellipsis; //超出部分以省略号显示
        // white-space: nowrap;
        display: -webkit-box;
        -webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
        -webkit-box-orient: vertical;
        cursor: pointer;
        &:hover {
          color: #1d2f70;
          text-decoration: underline;
        }
      }
      .invitationBoxSubTitle {
        min-height: 40px;
        color: #6c6c6c;
        font-size: 17px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 可以显示的行数，超出部分用...表示*/
        -webkit-box-orient: vertical;
      }
      .invitationBoxBottom {
        display: flex;
        margin-top: 14px;
        color: #b3b2b2;
        position: relative;
        .invitationBoxBottomItem {
          margin-right: 18px;
          font-size: 14px;
        }
        .invitationBoxBottomItem2 {
          position: absolute;
          right: 0;
          margin-right: 18px;
          font-size: 14px;
          color: dodgerblue;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}
</style>
